<template>
  <div>
    <div @click="back" class="back">×</div>
    <van-index-bar :index-list="indexList">
      <!-- 为什么要用div包起来？因为A字母部分是一块，城市部分是一块，对应着字母领导部分城市 -->
      <div>
        <div class="city">
          <span style="height: 20px">热门城市</span>
          <div class="cheng">
            <div v-for="(item, key) in hotCity" :key="key">
              <van-button
                type="primary"
                size="normal"
                color="#f4f4f4"
                text="#000"
                block
                >{{ item }}</van-button
              >
            </div>
          </div>
        </div>
        <div v-for="(item, key) in cityList" :key="key">
          <van-index-anchor>{{ key }}</van-index-anchor>
          <van-cell
            v-for="v in item"
            :key="v.cityList"
            :title="v.name"
            @click="cityId(v.cityId, v.name)"
          />
        </div>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
// 导入API
import api from '@/api'
import Vue from 'vue'
import { IndexBar, IndexAnchor, Cell, Button } from 'vant'

Vue.use(IndexBar)
Vue.use(IndexAnchor)
Vue.use(Cell)
Vue.use(Button)
export default {
  data() {
    return {
      // 右侧的字母列表
      indexList: [],
      // 26个字母的数组
      words: [],
      // 这里的城市数据应该是{A:[{a开头的城市},{a开头的城市}]B:[{b开头的城市},{b开头的城市}]}
      cityList: {},
      hotCity: []
    }
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    cityId(id, name) {
      console.log(id, name)
      this.$store.commit('getCityName', name)
      this.$store.commit('getCityId', id)
      this.$router.back()
    }
  },
  created() {
    this.$store.commit('hide')
    // console.log(this.hotCity)
    // console.log(this.cityList)
    // 定义好26个英文字母
    for (let i = 65; i <= 90; i++) {
      this.words.push(String.fromCharCode(i))
    }
    // 发送请求
    this.$http.get(api.getCity).then((res) => {
      // console.log(res)
      // console.log(res.data.cities)cityId
      // 获取热门城市
      res.data.cities.forEach((i) => {
        if (i.isHot === 1) {
          this.hotCity.push(i.name)
        }
      })
      // 最终需要在这里面筛选数据
      // 通过遍历words，筛选数据，如果首字母存在的，就放在indexList(右侧的字母列表里)
      this.words.forEach((word) => {
        res.data.cities.forEach((item) => {
          // 如果数据的项pinyin的下标0转大写后，跟26个英文字母中的一样，就把它放在indexList里
          if (item.pinyin[0].toUpperCase() === word) {
            //   寻找indexList里面的Word有没有出现，没有出现就往indexList里面添加
            // indexOf():如果要检索的字符串值没有出现，则该方法返回 -1
            if (this.indexList.indexOf(word) < 0) {
              this.indexList.push(word)
            }
            // 以上的步骤，在右侧的便签栏中的数据已经完成
            // 如果城市列表(cityList)中有数据,有就添加上，没有就在等于这个item
            if (this.cityList[word]) {
              this.cityList[word].push(item)
            } else {
              this.cityList[word] = [item]
            }
          }
        })
      })
    })
  },
  beforeDestroy() {
    this.$store.commit('show')
  }
}
</script>

<style scoped lang='sass'>
.back
  box-sizing: border-box
  display: inline-block
  padding: 5px 0 0 5px

.city
  box-sizing: border-box
  width: 100%
  height: 130px
  background-color: #fff
  font-size: 13px
  color: #797d82
  margin-bottom: 10px
  padding-left: 15px
  padding-top: 20px
  color: #000
  .cheng
    box-sizing: border-box
    display: flex
    justify-content: space-around
    padding-top: 12px
    .van-button
      color: #000 !important
</style>
